{% extends "::layoutSimple.html.twig" %}

{% block css_custom %}
    {% stylesheets filter='cssrewrite'
	'bundles/ufsw/css/plugins/social-buttons.css'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}
    
{% block portada %}
    FOTO | {{ usuario.username }}
{% endblock %}

{% block pagina %}
    {% embed 'reglon.html.twig' with {'size': 12, 'style': "default"} %}
        {% block panelhead %}
            {% trans %}info.usuario{% endtrans %}
        {% endblock %}

        {% block panelbody %}
            <div class="panel-body">
                <!-- Nav tabs -->
                <ul class="nav nav-pills">
                    <li class="active"><a href="#home-pills" data-toggle="tab">{% trans %}cuenta{% endtrans %}</a>
                    </li>
                    <li><a href="#contacto-pills" data-toggle="tab">{% trans %}contacto{% endtrans %}</a>
                    </li>
                    <li><a href="#jugador-pills" data-toggle="tab">{% trans %}jugador{% endtrans %}</a>
                    </li>
                    <li><a href="#contactar-pills" data-toggle="tab">{% trans %}contactar{% endtrans %}</a>
                    </li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div class="tab-pane fade in active" id="home-pills">
                        <h4>Cuenta Tab</h4>
                        <ul class="list-unstyled">
                            <li>{%trans%}nombre{%endtrans%}: {{usuario.nombre}}</li>
                            <li>{%trans%}apellido{%endtrans%}: {{usuario.apellido}}</li>
                            <li>{%trans%}email{%endtrans%}: {{usuario.email}}</li>
                            <li>{%trans%}username{%endtrans%}: {{usuario.username}}</li>
                        </ul>
                        <a href="{{path('usuario_editar', {'usuario':usuario})}}" class="btn btn-primary">{%trans%}editar{%endtrans%}</a>
                        <a href="{{path('usuario_inicio')}}" class="btn btn-primary">{%trans%}volver{%endtrans%}</a>
                    </div>
                    <div class="tab-pane fade" id="contacto-pills">
                        <h4>Profile Tab</h4>
                        <div class="col-lg-4">
                            <a class="btn btn-block btn-social btn-bitbucket">
                                <i class="fa fa-bitbucket"></i> Sign in with Bitbucket
                            </a>
                            <a class="btn btn-block btn-social btn-dropbox">
                                <i class="fa fa-dropbox"></i> Sign in with Dropbox
                            </a>
                            <a class="btn btn-block btn-social btn-facebook">
                                <i class="fa fa-facebook"></i> Sign in with Facebook
                            </a>
                            <a class="btn btn-block btn-social btn-flickr">
                                <i class="fa fa-flickr"></i> Sign in with Flickr
                            </a>
                            <a class="btn btn-block btn-social btn-github">
                                <i class="fa fa-github"></i> Sign in with GitHub
                            </a>
                            <a class="btn btn-block btn-social btn-google-plus">
                                <i class="fa fa-google-plus"></i> Sign in with Google
                            </a>
                            <a class="btn btn-block btn-social btn-instagram">
                                <i class="fa fa-instagram"></i> Sign in with Instagram
                            </a>
                            <a class="btn btn-block btn-social btn-linkedin">
                                <i class="fa fa-linkedin"></i> Sign in with LinkedIn
                            </a>
                            <a class="btn btn-block btn-social btn-pinterest">
                                <i class="fa fa-pinterest"></i> Sign in with Pinterest
                            </a>
                            <a class="btn btn-block btn-social btn-tumblr">
                                <i class="fa fa-tumblr"></i> Sign in with Tumblr
                            </a>
                            <a class="btn btn-block btn-social btn-twitter">
                                <i class="fa fa-twitter"></i> Sign in with Twitter
                            </a>
                            <a class="btn btn-block btn-social btn-vk">
                                <i class="fa fa-vk"></i> Sign in with VK
                            </a>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="jugador-pills">
                        <h4>Messages Tab</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                        <a href="{{path('jugador_nuevo', {'usuario':usuario})}}" class="btn btn-primary">{%trans%}ser.jugador{%endtrans%}</a>
                    </div>
                    <div class="tab-pane fade" id="contactar-pills">
                        <h4>Settings Tab</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    </div>
                </div>
            </div>
        {% endblock %}
    {% endembed %}
{% endblock %}